<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import FileUpload from "@/components/file-system/file-upload.vue";
import type { FormDescChild } from "@/components/form-desc/form-desc.vue";
import {
	whManagerBsTbRiskHazardsHandleParkSaveAndSupervisionUsingPost,
	whManagerBsTbRiskHazardsHandleGetByIdIdUsingPost,
	whManagerBsTbEnterpriseGetListUsingPost,
	whManagerBsTbRiskHazardsHandleCheckUsingPost,
} from "@/genapi/wh";
import { useAsync } from "@/hooks/use-async";
import { computedLoading } from "@/hooks/computed-loading";
import {
	getEnumOptionsField,
	RISK_HAZARDS_LEVEL_OPTIONS,
	RISK_HAZARDS_SUPERVISION_STATUS_OPTIONS,
} from "@/config/enum-options";
import {
	INDUSTRY_OPTIONS,
	CHECK_PLAN_OPTIONS,
	HAZARD_LEVEL_OPTIONS,
	CHECK_STATUS_OPTIONS,
} from "@/config/enum-map";

import { injectState } from "../state";

defineOptions({ name: "DetailDialog" });

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents["FormDesc"]>>();

const type = ref<"write" | "read">();

const beforeClose = async () => {
	if (type.value === "write") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (_type: "write" | "read" = "read", value = {} as any) => {
	type.value = _type;
	model.value = JSON.parse(JSON.stringify(value)) as any;
	await dialogRef.value?.open();
};

defineExpose({
	trigger,
});

const model = ref<(typeof page.records.value)[0]>({});

const file1 = computed({
	get() {
		if (model.value.riskHazardsIdList) {
			return [
				{
					id: model.value.fileId,
					name: model.value.fileName,
				},
			];
		}
	},
	set(value: any) {
		model.value.riskHazardsIdList = [];
		value.forEach((item) => {
			model.value.riskHazardsIdList.push(item.id);
		});
	},
});

const file2 = computed({
	get() {
		if (model.value.checkFileIdList) {
			return [
				{
					id: model.value.fileId,
					name: model.value.fileName,
				},
			];
		}
	},
	set(value: any) {
		model.value.checkFileIdList = [];
		value.forEach((item) => {
			model.value.checkFileIdList.push(item.id);
		});
	},
});

const file3 = computed({
	get() {
		if (model.value.checkImageIdList) {
			return [
				{
					id: model.value.fileId,
					name: model.value.fileName,
				},
			];
		}
	},
	set(value: any) {
		model.value.checkImageIdList = [];
		value.forEach((item) => {
			model.value.checkImageIdList.push(item.id);
		});
	},
});

const title = computed(() => {
	if (type.value === "write") {
		return model.value.id ? "复查" : "新增隐患督办";
	} else {
		return `整改详情`;
	}
});

const { execute, isLoading } = useAsync(async () => {
	await formDescRef.value?.formRef?.validate();
	await ElMessageBox.confirm("确认提交？", "提示", {
		type: "warning",
	});
	if (model.value.id) {
		await whManagerBsTbRiskHazardsHandleCheckUsingPost({
			data: {
				...model.value,
			},
		});
	} else {
		await whManagerBsTbRiskHazardsHandleParkSaveAndSupervisionUsingPost({
			data: {
				...model.value,
			},
		});
	}

	ElMessage.success("提交成功");
	page.execute();
	dialogRef.value?.complete();
});

const [details] = computedLoading(async () => {
	const { data } = await whManagerBsTbRiskHazardsHandleGetByIdIdUsingPost({
		path: { id: model.value.id },
	});
  // console.log(data)
	return data;
});
const [companyList] = computedLoading(async () => {
	const { data } = await whManagerBsTbEnterpriseGetListUsingPost({ data: {} });
	return data?.map((item) => ({ label: item.name, value: item.id })) ?? [];
});

const getCompanyName = () => {
	const res = companyList.value.filter((item) => {
		return item.id === details.value?.enterpriseId;
	});
	return res[0] ? res[0] : "--";
};

// const children: FormDescChild[] = [
// 	{
// 		label: "督办企业",
// 		prop: "enterpriseId",
// 		rule: [{ required: true, message: "请输入", trigger: "blur" }],
// 		span: 1,
// 		formItem: () => (
// 			<el-select-v2
// 				class="w-100%"
// 				options={companyList ?? []}
// 				v-model={model.value!.enterpriseId}
// 				placeholder="请选择"
// 			/>
// 		),
// 		descItem: () => `${model.value.enterpriseId ?? "-"}`,
// 	},
// 	{
// 		label: "所属行业",
// 		prop: "industry",
// 		rule: [{ required: false, message: "请输入", trigger: "blur" }],
// 		span: 1,
// 		formItem: () => (
// 			<el-select-v2
// 				class="w-100%"
// 				options={[...INDUSTRY_OPTIONS]}
// 				v-model={model.value!.industry}
// 				placeholder="请选择"
// 			/>
// 		),
// 		descItem: () => `${model.value.industry ?? "-"}`,
// 	},
// 	{
// 		label: "隐患级别",
// 		prop: "level",
// 		rule: [{ required: true, message: "请输入", trigger: "blur" }],
// 		span: 1,
// 		formItem: () => (
// 			<el-select-v2
// 				class="w-100%"
// 				options={[...HAZARD_LEVEL_OPTIONS]}
// 				v-model={model.value!.level}
// 				placeholder="请选择"
// 			/>
// 		),
// 		descItem: () => `${model.value.level ?? "-"}`,
// 	},
// 	{
// 		label: "隐患来源",
// 		prop: "dataSource",
// 		rule: [{ required: true, message: "请输入", trigger: "blur" }],
// 		span: 1,
// 		formItem: () => (
// 			<el-select-v2
// 				class="w-100%"
// 				options={[...CHECK_PLAN_OPTIONS]}
// 				v-model={model.value!.dataSource}
// 				placeholder="请选择"
// 			/>
// 		),
// 		descItem: () => `${model.value.dataSource ?? "-"}`,
// 	},
// 	{
// 		label: "整改开始日期",
// 		prop: "handlePlanStartDate",
// 		rule: [{ required: true, message: "请输入", trigger: "blur" }],
// 		span: 1,
// 		formItem: () => (
// 			<el-date-picker
// 				v-model={model.value.handlePlanStartDate}
// 				clearable
// 				type="date"
// 				class="w-100%"
// 				placeholder="开始日期"
// 				value-format="YYYY-MM-DD"
// 			/>
// 		),
// 		descItem: () => `${model.value.handlePlanStartDate ?? "-"}`,
// 	},
// 	{
// 		label: "整改结束日期",
// 		prop: "handlePlanEndDate",
// 		rule: [{ required: true, message: "请输入", trigger: "blur" }],
// 		span: 1,
// 		formItem: () => (
// 			<el-date-picker
// 				v-model={model.value.handlePlanEndDate}
// 				clearable
// 				type="date"
// 				class="w-100%"
// 				placeholder="结束日期"
// 				value-format="YYYY-MM-DD"
// 			/>
// 		),
// 		descItem: () => `${model.value.handlePlanEndDate ?? "-"}`,
// 	},
// 	{
// 		label: "经度",
// 		prop: "longitude",
// 		rule: [{ required: true, message: "请输入", trigger: "blur" }],
// 		span: 1,
// 		formItem: () => (
// 			<el-input v-model={model.value.longitude} placeholder="请输入" />
// 		),
// 		descItem: () => `${model.value.longitude ?? "-"}`,
// 	},
// 	{
// 		label: "纬度",
// 		prop: "latitude",
// 		rule: [{ required: true, message: "请输入", trigger: "blur" }],
// 		span: 1,
// 		formItem: () => (
// 			<el-input v-model={model.value.latitude} placeholder="请输入" />
// 		),
// 		descItem: () => `${model.value.latitude ?? "-"}`,
// 	},
// 	{
// 		label: "隐患描述",
// 		prop: "description",
// 		rule: [{ required: true, message: "请输入", trigger: "blur" }],
// 		span: 2,
// 		formItem: () => (
// 			<el-input v-model={model.value.description} placeholder="请输入" />
// 		),
// 		descItem: () => `${model.value.description ?? "-"}`,
// 	},
// 	{
// 		label: "隐患图片",
// 		prop: "riskHazardsIdList",
// 		rule: [{ required: false, message: "请输入", trigger: "blur" }],
// 		span: 2,
// 		formItem: () => (
// 			<FileUpload v-model={file.value} limit={3} w="100%">
// 				<el-button type="primary">
// 					{{
// 						icon: () => <el-icon class="i-custom:add"></el-icon>,
// 						default: () => "增加附件",
// 					}}
// 				</el-button>
// 			</FileUpload>
// 		),
// 		descItem: () => (
// 			<FileUpload v-model={file.value} limit={3} disabled={true} />
// 		),
// 	},
// ];

let children: FormDescChild[] = computed(() => {
	if (!model.value.id) {
		return [
			{
				label: "督办企业",
				prop: "enterpriseId",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-select-v2
						class="w-100%"
						options={companyList ?? []}
						v-model={model.value!.enterpriseId}
						placeholder="请选择"
					/>
				),
				descItem: () => `${model.value.enterpriseId ?? "-"}`,
			},
			{
				label: "所属行业",
				prop: "industry",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-select-v2
						class="w-100%"
						options={[...INDUSTRY_OPTIONS]}
						v-model={model.value!.industry}
						placeholder="请选择"
					/>
				),
				descItem: () => `${model.value.industry ?? "-"}`,
			},
			{
				label: "隐患级别",
				prop: "level",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-select-v2
						class="w-100%"
						options={[...HAZARD_LEVEL_OPTIONS]}
						v-model={model.value!.level}
						placeholder="请选择"
					/>
				),
				descItem: () => `${model.value.level ?? "-"}`,
			},
			{
				label: "隐患来源",
				prop: "dataSource",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-select-v2
						class="w-100%"
						options={[...CHECK_PLAN_OPTIONS]}
						v-model={model.value!.dataSource}
						placeholder="请选择"
					/>
				),
				descItem: () => `${model.value.dataSource ?? "-"}`,
			},
			{
				label: "整改开始日期",
				prop: "handlePlanStartDate",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-date-picker
						v-model={model.value.handlePlanStartDate}
						clearable
						type="date"
						class="w-100%"
						placeholder="开始日期"
						value-format="YYYY-MM-DD"
					/>
				),
				descItem: () => `${model.value.handlePlanStartDate ?? "-"}`,
			},
			{
				label: "整改结束日期",
				prop: "handlePlanEndDate",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-date-picker
						v-model={model.value.handlePlanEndDate}
						clearable
						type="date"
						class="w-100%"
						placeholder="结束日期"
						value-format="YYYY-MM-DD"
					/>
				),
				descItem: () => `${model.value.handlePlanEndDate ?? "-"}`,
			},
			{
				label: "经度",
				prop: "longitude",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-input v-model={model.value.longitude} placeholder="请输入" />
				),
				descItem: () => `${model.value.longitude ?? "-"}`,
			},
			{
				label: "纬度",
				prop: "latitude",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-input v-model={model.value.latitude} placeholder="请输入" />
				),
				descItem: () => `${model.value.latitude ?? "-"}`,
			},
			{
				label: "隐患描述",
				prop: "description",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 2,
				formItem: () => (
					<el-input v-model={model.value.description} placeholder="请输入" />
				),
				descItem: () => `${model.value.description ?? "-"}`,
			},
			{
				label: "隐患图片",
				prop: "riskHazardsIdList",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 2,
				formItem: () => (
					<FileUpload v-model={file1.value} limit={3} w="100%">
						<el-button type="primary">
							{{
								icon: () => <el-icon class="i-custom:add"></el-icon>,
								default: () => "增加附件",
							}}
						</el-button>
					</FileUpload>
				),
				descItem: () => (
					<FileUpload v-model={file1.value} limit={3} disabled={true} />
				),
			},
		];
	} else {
		return [
			{
				label: "复查结果",
				prop: "checkStatus",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-select-v2
						class="w-100%"
						options={[...CHECK_STATUS_OPTIONS]}
						v-model={model.value!.checkStatus}
						placeholder="请选择"
					/>
				),
				descItem: () => `${model.value.checkStatus ?? "-"}`,
			},
			{
				label: "复查部门",
				prop: "checkDept",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-input v-model={model.value.checkDept} placeholder="请输入" />
				),
				descItem: () => `${model.value.checkDept ?? "-"}`,
			},
			{
				label: "核查人员",
				prop: "checkPerson",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-input v-model={model.value.checkPerson} placeholder="请输入" />
				),
				descItem: () => `${model.value.checkPerson ?? "-"}`,
			},
			{
				label: "复查日期",
				prop: "checkDate",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 1,
				formItem: () => (
					<el-date-picker
						v-model={model.value.checkDate}
						clearable
						type="date"
						class="w-100%"
						placeholder="选择日期"
						value-format="YYYY-MM-DD"
					/>
				),
				descItem: () => `${model.value.checkDate ?? "-"}`,
			},
			{
				label: "复查意见",
				prop: "checkView",
				rule: [{ required: true, message: "请输入", trigger: "blur" }],
				span: 2,
				formItem: () => (
					<el-input
						type="textarea"
						v-model={model.value.checkView}
						placeholder="请输入"
					/>
				),
				descItem: () => `${model.value.checkView ?? "-"}`,
			},
			{
				label: "复查材料",
				prop: "checkFileIdList",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 2,
				formItem: () => (
					<FileUpload v-model={file2.value} limit={3} w="100%">
						<el-button type="primary">
							{{
								icon: () => <el-icon class="i-custom:add"></el-icon>,
								default: () => "增加附件",
							}}
						</el-button>
					</FileUpload>
				),
				descItem: () => (
					<FileUpload v-model={file2.value} limit={3} disabled={true} />
				),
			},
			{
				label: "复查图片",
				prop: "checkImageIdList",
				rule: [{ required: false, message: "请输入", trigger: "blur" }],
				span: 2,
				formItem: () => (
					<FileUpload v-model={file3.value} limit={3} w="100%">
						<el-button type="primary">
							{{
								icon: () => <el-icon class="i-custom:add"></el-icon>,
								default: () => "增加附件",
							}}
						</el-button>
					</FileUpload>
				),
				descItem: () => (
					<FileUpload v-model={file3.value} limit={3} disabled={true} />
				),
			},
		];
	}
});
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="title"
		:before-close="beforeClose"
		w="707px!"
	>
		<el-scrollbar h="408px!">
			<el-descriptions :column="4" title="隐患描述" v-if="type === 'read'">
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="关联企业"
					>{{ getCompanyName() || "-" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="隐患级别"
					>{{
						getEnumOptionsField(
							RISK_HAZARDS_LEVEL_OPTIONS,
							"label",
							details.level,
						) || "--"
					}}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="上报时间"
					>{{ details.reportTime || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="整改期限"
					>{{
						`${details.handlePlanStartDate}-${details.handlePlanEndDate}` ||
						"--"
					}}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="隐患描述"
					>{{ details.description || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="隐患位置"
					>{{
						`${details.longitude},${details.latitude}` || "--"
					}}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="4"
					label="隐患图片"
				>
					--
				</el-descriptions-item>
			</el-descriptions>
			<el-descriptions :column="4" title="整改情况" v-if="type === 'read' && details.value === undefined? false:true">
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="完成时间"
					>{{ details.handleRealDate || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="负责人员"
					>{{ details.masterName || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="投入资金"
					>{{ details.spendAmount || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="整改预案"
					>{{ details.handleFileList || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="4"
					label="整改措施"
					>{{ details.handleMethod || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="4"
					label="整改图片"
				>
					--
				</el-descriptions-item>
			</el-descriptions>
			<el-descriptions :column="4" title="复查情况" v-if="type === 'read' && details.value === undefined? false:true">
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="复查结果"
					>{{
						getEnumOptionsField(
							RISK_HAZARDS_SUPERVISION_STATUS_OPTIONS,
							"label",
							details.supervisionStatus,
						) || "--"
					}}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="复查部门"
					>{{ details.checkDept || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="核查人员"
					>{{ details.checkPerson || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="复查日期"
					>{{ details.checkDate || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="2"
					label="复查材料"
					>{{ details.checkFileList || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="4"
					label="复查意见"
					>{{ details.checkView || "--" }}</el-descriptions-item
				>
				<el-descriptions-item
					width="50%"
					class-name="descriptionsItem"
					:span="4"
					label="复查图片"
				>
					--
				</el-descriptions-item>
			</el-descriptions>
			<FormDesc
				ref="formDescRef"
				m="t-24px x-30px"
				v-if="type === 'write'"
				:type="type === 'read' ? 'desc' : 'form'"
				form-class="gap-x-20px"
				:model="model"
				:children="children"
				:column="2"
			/>
		</el-scrollbar>
		<template v-if="type === 'write'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="execute()"
				>确定</el-button
			>
		</template>
	</PromiseDialog>
</template>

<style lang="scss" scoped>
:deep(.descriptionsItem) {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
</style>
